<template>
    <div class="breadcrumb">
        <el-breadcrumb separator="/">
<!--            <el-breadcrumb-item :to="value.path" v-for="value in lists " > 因为时间等其他因素原因，不想调整样式，等一会慢慢研究-->
            <el-breadcrumb-item  v-for="(value,i) in lists " :key="i">
                {{value.meta.tile}}
            </el-breadcrumb-item>
        </el-breadcrumb>

        <!--右侧下拉框-->
        <el-dropdown @command="handleCommand">
            <div class="avatar user">
                <el-avatar :size="size" :src="require('@/assets/images/header.jpg')" alt="用户头像" :key="1">
                    <img :src="require('@/assets/images/img.png')" alt="失败头像"/>
                </el-avatar>
                <div>
                    <small v-text="userName" class="user-name">VUE</small>
                </div>
            </div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="goBack">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    import {sessionStop} from "@/api/user/user";

    export default {
        name: "",
        data() {
            return {
                lists: [],
                userName:'admin',
                size:40,
            }
        },
        created() {
            this.lists = this.$route.matched;
            this.userName=sessionStorage.getItem('user');
        },
        watch: {
            $route(to) {
                this.lists = to.matched;
            }
        },
        methods: {
            handleCommand(command){
                if(command=='profile'){
                    this.$router.push({
                        path: "/personal",
                    })
                }else{
                    this.goBack();
                }
            },
            goBack(){
                sessionStop().then(response=>{
                    this.msgSuccess("退出成功");
                });
                this.$router.push({
                    path: "/login",
                })
            }
        }
    }
</script>

<style scoped>

</style>